<!--
 * @Author: LBH 1336709799@qq.com
 * @Date: 2024-11-13 21:37:21
 * @LastEditors: LBH 1336709799@qq.com
 * @LastEditTime: 2024-11-14 10:32:44
 * @FilePath: \数学题\math\src\SubjectItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
    <div class="subject" v-for="(item,index) in numArr" :key = "index">
      <span>{{ item.num1 }}</span>
      <span>+</span>
      <span>{{ item.num2 }}</span>
      <span>=</span>
      <input type="number" v-model.number = "item.key"/>
      <button @click="getSum(index)">提交</button>
    </div>   
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
        numArr:[]
      }
    },
    created(){
      this.getNum()
    },
    methods:{
      getNum(){
        let num1 = 0
        let num2 = 0
        for(let i = 0;i < 5;i++){
          num1 = Math.floor(Math.random() * 11)
          num2 = Math.floor(Math.random() * 11)
          this.numArr.unshift({
            num1,
            num2,
            sum:num1 + num2
          })
        }
      },
      getSum(index){
        this.$emit('getSum',this.numArr[index].sum, this.numArr[index].key,index)
        // console.log(index)
      }
    }
  
  };
  </script>
  
  <style scoped>
  .subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
  }
  .subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
  }
  .subject input {
    width: 50px;
    height: 20px;
  }
  </style>